<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>任务一：零基础HTML编码</title>
	<link rel="stylesheet" href="test2.css">
</head>
<body>

	<div class="header">
		<a class="oneName">
			<img src="baidu.jpg" alt="百度一下，你就知道" height="70px" width="100px">
		</a>
		
		<ul class="href_list">
			<li >
				<a href="http://www.google.com">导航链接一</a>
			</li>
			<li>
				<a href="http://www.google.com">导航链接二</a>
			</li>
			<li>
				<a href="http://www.google.com">导航链接三</a>
			</li>
			<li>
				<a href="http://www.google.com">导航链接四</a>
			</li>
		</ul>
	</div>
	<div class="container" style="border: 1px solid #000; overflow: hidden;">
		<div class="passage">
			<div class="firstMessage" class="">
				<h2>文章一级标题</h2>
				<h3>文章二级标题</h3>
				<span style="font-style: italic;">文章作者</span>
				<span style="font-style: italic;">文章发表时间</span>
				<p>
					这是一个<spna>很长很长</spna>的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<br/>
					换行了
					<br/>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<br/>
					这是一个很长很长的段落，这是一个很长很长的段落，
					<a href="http://www.baidu.com">这是一个链接：http://www.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<br/>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				</p>
				<img src="1.png" alt="示例图片" width="300px" height="200px;">
				<p>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<br/>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<a href="http://www.baidu.com">click here to run http://www.baidu.com</a>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				</p>
				
			</div>

			<div class="secondMessage">
				<h2>另一篇文章一级标题</h2>
				<h3>文章二级标题</h3>
				<span style="font-style: italic;">文章作者</span>
				<span style="font-style: italic;">文章发表时间</span>
				<p>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<br/>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<br/>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
					<a href="http://www.google.com">Click here to run http://www.google.com</a>
					这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				</p>
				<img src="1.png" width="300px" height="200px;">
				<ul>
					<li>列表项目一</li>
					<li>列表项目二</li>
					<li>列表项目三</li>
				</ul>
			</div>

			<div class="photo">
				<h5>Photo</h5>
				<div class="photolist">
					<p>好看的图片</p>
					<img src="1.png">
				</div>
				<div class="photolist">
					<p>好看的图片</p>
					<img src="1.png">
				</div>

				<div class="photolist">
					<p>好看的图片</p>
					<img src="1.png">
				</div>
				<div class="photolist">
					<p>好看的图片</p>
					<img src="1.png">
				</div>
				<div class="photolist">
					<p>好看的图片</p>
					<img src="1.png">
				</div>
				<div class="photolist">
					<p>好看的图片</p>
					<img src="1.png">
				</div>
			</div>
			<div style="clear: both;"></div>
			<div class="lastMessage">
				<h2>最后一篇文章一级标题</h2>
				<h3>文章二级标题</h3>
				<span style="font-style: italic;">文章作者</span>
				<span style="font-style: italic;">文章发表时间</span>
				<ol>
					<li>排名一</li>
					<li>排名二</li>
					<li>排名三</li>
				</ol>
				<p>下面是一个表格，给表格加了一个border=“1”好让你看出是一个表格</p>
				<table class="tableid" border="1px">
					<tr>
						<th>表头</th>
						<th>表头</th>
						<th>表头</th>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="http:www.google.com">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="http:www.google.com">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="http:www.google.com">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="http:www.google.com">操作</a></td>
					</tr>
					<tr style="background-color: #F6E9E9">
						<td>总计</td>
						<td colspan="2">1000</td>
					</tr>
				</table>
			</div>
		</div>
		<form action="" method="post">
		<div class="celan">
			<div class="fleft">
				<label>
					请输入邮箱地址：
				</label>
				<br/>
				<label></label>
				<br/>
				<label>请输入密码：</label>
				<br/>
				<label></label>
				
				<label>请重复输入密码：</label>
				<br/>
				<br/>
				<label>性别：</label>
				<br/>
				<label>城市：</label>
				<br/>
				<label>爱好：</label>
				<br/>
				<label>个人描述：</label>
				<br/>
			</div>
			<div class="fright">
				<input type="text" placeholder="这是一个单行文本输入框" />
				<br/>
				<label>
					<i class="email">邮箱地址请桉要求输入</i>
				</label>
				<br/>
				<input type="password" name="passwordtext" placeholder="请输入6-16位密码" />
				<br/>
				<input type="password" name="passwordtext" placeholder="请输入6-16位密码"/>
				<br/>
				<label>密码请为6-16位英文数字</label>
				<br/>
				<input type="radio" name="sex" checked="checked">男
				<input type="radio" name="sex">女
				<br/>
				<select name="city" size="1">
					<option value="">北京</option>
					<option value="">上海</option>
					<option value="">广州</option>
					<option value="">成都</option>
					<option value="">深圳</option>
				</select>
				<br/>
				<input type="checkbox" value="happy" checked="">运动
				<input type="checkbox" value="happy">艺术
				<input type="checkbox" value="happy">科学
				<br/>
				<textarea rows="3" cols="30" placeholder="请输入您的描述"></textarea>
				<br/>
			</div>
			<br/>
			<div class="submitbut">
				<input type="button" value="submit" />
			</div>
		</div>	
		</form>
	</div>
	<div class="copylogo">
		<br/>版权所有&copy;
	</div>
</body>
</html>